<template>
   <div class="share">
        <div @click="shareWX">
            <img src="../../assets/微信@3x.png" alt="">
        </div>
        <div @click="shareQQ">
            <img src="../../assets/QQ@3x.png" alt="">
        </div>
        <div @click="shareWzone">
            <img src="../../assets/朋友圈@3x.png" alt="">
        </div>
        <div @click="shareQzone">
            <img src="../../assets/QQ空间@3x.png" alt="">
        </div>
        <input type="text" onfocus="this.blur();" :value="shareData.url" id="copy-content"/>
    </div>
</template>
<script>
export default {
    data() {
        return {
            name: '',
            chipsDetails: {}, //支持数据
            userId: '', //用户id
            shareData: {
                url: 'https://www.baidu.com',
                showcount: '1',
                /*是否显示分享总数,显示：'1'，不显示：'0' */
                desc: '1',
                /*默认分享理由(可选)*/
                summary: '好文章',
                /*分享摘要(可选)*/
                title: '很正常',
                /*分享标题(可选)*/
                site: '标题',
                /*分享来源 如：腾讯网(可选)*/
                pics: '来源',
                /*分享图片的路径(可选)*/
                style: '101',
                width: 199,
                height: 30
            },
            stareChipsId: this.stareId
        }
    },
    props: ['stareId'],
    created() {},
    mounted() {
        this.getChips()
    },
    methods: {
        // 获取支持详情
        getChips() {
            let userMessage = this.utils.cookie('get', 'user')
            if (userMessage) {
                this.userId = userMessage.userId
            }
            this.utils.$get(
                this.utils.GET_CHIPS_DETAILS,
                data => {
                    this.chipsDetails = data.data || this.chipsDetails
                    this.shareData = {
                        url:
                            'http://www.1sedu.com/activity/index.html' +
                            '#/support_details/' +
                            this.userId +
                            ',' +
                            this.stareId,
                        showcount: '0',
                        /*是否显示分享总数,显示：'1'，不显示：'0' */
                        desc: this.chipsDetails.activityAddress,
                        /*默认分享理由(可选)*/
                        summary:
                            '我在一生教育看见一个不错的活动，快来支持一下吧',
                        /*分享摘要(可选)*/
                        title: this.chipsDetails.activityName,
                        /*分享标题(可选)*/
                        site: '一生教育网络科技有限公司',
                        /*分享来源 如：腾讯网(可选)*/
                        pics: this.chipsDetails.activityImage,
                        /*分享图片的路径(可选)*/
                        style: '101',
                        width: 199,
                        height: 30
                    }
                },
                { id: this.stareId }
            )
        },
        // 分享到空间
        shareQzone() {
            this.copy()
            return
            let s = []
            for (var i in this.shareData) {
                s.push(i + '=' + encodeURIComponent(this.shareData[i] || ''))
            }
            window.open(
                'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?' +
                    s.join('&')
            )
        },
        // 分享到QQ
        shareQQ() {
            this.copy()
            return
            let s = []
            for (var i in this.shareData) {
                s.push(i + '=' + encodeURIComponent(this.shareData[i] || ''))
            }
            window.open(
                'http://connect.qq.com/widget/shareqq/index.html?' + s.join('&')
            )
        },
        // 复制
        copy() {
            var copyobject = document.getElementById('copy-content')
            copyobject.select()
            document.execCommand('Copy')
            mui.toast('已复制链接')
        },
        // 分享到微信
        shareWX() {
            if (!this.utils.browser.weixin) {
                this.copy()
            } else {
                this.copy()
                return
                let wxShareData = this.chipsDetails
                let _this = GET_CHIPS_DETAILS
                let shareOption = {
                    title: wxShareData.activityName, // 分享标题
                    desc: wxShareData.activityAddress, // 分享描述
                    link:
                        'http://www.1sedu.com/activity/index.html' +
                        '/#/support_details/' +
                        _this.userId +
                        ',' +
                        _this.stareId, // 分享链接，该链接域名必须与当前企业的可信域名一致
                    imgUrl: wxShareData.activityImage, // 分享图标
                    type: 'link', // 分享类型,music、video或link，不填默认为link
                    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                    success: function() {
                        // 用户确认分享后执行的回调函数
                        mui.toast('分享成功')
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数
                        mui.toast('失败')
                    }
                }
                wx.onMenuShareAppMessage(shareOption)
            }
        },
        // 分享到朋友圈
        shareWzone() {
            if (!this.utils.browser.weixin) {
                this.copy()
            } else {
                this.copy()
                return
                let _this = this
                let wxShareData = this.chipsDetails
                let shareOption = {
                    title: wxShareData.activityName, // 分享标题
                    link:
                        'http://www.1sedu.com/activity/index.html' +
                        '/#/support_details/' +
                        _this.userId +
                        ',' +
                        _this.stareId, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: wxShareData.activityImage, // 分享图标
                    success: function() {
                        // 用户确认分享后执行的回调函数
                        mui.toast('分享成功')
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数
                        mui.toast('分享失败')
                    }
                }
                wx.onMenuShareTimeline(shareOption)
            }
        }
    }
}
</script>

<style lang="less">
.share {
    padding: 0 0.4rem;
    > div {
        width: 25%;
        padding: 0.4rem 0.3rem;
        float: left;
        > img {
            width: 0.7rem;
            height: 0.7rem;
        }
    }
    .copy-modal {
        position: fixed;
    }
    #copy-content {
        opacity: 0;
        position: absolute;
        top: 0;
        left: -999px;
    }
}
</style>
